<template>
    <div class="head">
        <img src="@/assets/images/order-details-icon.png">
        <div class="text">
            <span class="title">{{ myHead.status_name }}</span>
            <span class="detail" v-if="myHead.status">{{ getDetail(myHead.status) }}</span>
        </div>
    </div>
</template>
<script>
import orderStatusText from "@/common/orderStatusText.js";
export default {
    name: "Head",
    props: { myHead: Object },
    methods: {
        case2() {
            return this.myHead.is_amount_apply == 2 ? "预计两个小时后自动关闭订单，请及时处理" : "已申请押金减免,请耐心等待审核！";
        },
        case16() {
            const { setmeal_foregift, pay_type } = this.myHead;
            return "您的订单已退款" + (pay_type == 2 ? "，已退回冻结押金￥" + setmeal_foregift : "");
        },
        case30() {
            const { lease_time, month_total } = this.myHead;
            return `您的订单租期：${lease_time}(共 ${month_total}月)到期后请及时处理(归还、续租、买断)`;
        },
        case62() {
            const { buyout_amount } = this.myHead;
            return '实付买断金额：￥' + buyout_amount;
        },
        getDetail(status) {
            let statusText = "";
            switch (status) {
                case 2:
                    statusText = this.case2();
                    break;
                case 16:
                    statusText = this.case16();
                    break;
                case 30:
                    statusText = this.case30();
                    break;
                case 62:
                    statusText = this.case62();
                    break;
                default:
                    statusText = orderStatusText[status]?.title;
                    break;
            }
            return statusText;
        }
    }
}
</script>
<style lang="scss" scoped>
.head {
    height: 170px;
    padding: 20px;
    padding-top: 35px;
    background-image: linear-gradient(to right, #fd5b4e, #f93134);
    display: flex;
    align-items: flex-start;

    img {
        width: 20px;
        object-fit: contain;
    }

    .text {
        color: white;
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        .title {
            font-size: 20px;
            font-weight: bold;
        }

        .detail {
            margin-top: 20px;
            font-size: 14px;
        }
    }
}
</style>